    <template>
        <div>
        <el-button type="primary" @click="showAddDialog">新增订单</el-button>
        <el-input v-model="searchQuery" placeholder="请输入订单编号进行查询" style="margin-bottom: 20px; width: 500px;margin-left: 500px;"></el-input>
        <!--分页-->
        <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :total="filteredTableData.length"
            :current-page.sync="currentPage"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
        <!--表格内容-->
        <el-table
            ref="list"
            :data="paginatedTableData"
            style="width: 100%"
            border
            stripe
            highlight-current-row
            :default-sort="{prop: 'date', order: 'descending'}"
            @row-click="handleRowClick"
            @select-all="handleCheckedAllAndCheckedNone"
            @select="handleCheckedAllAndCheckedNone">
            <el-table-column
            type="selection"
            width="45"
            align="center">
            </el-table-column>
            <el-table-column
            type="index"
            label="序号"
            width="50">
            </el-table-column>
            <el-table-column
            property="date"
            label="下单时间"
            width="180"
            sortable>
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 5px">{{scope.row.date}}</span>
            </template>
            </el-table-column>
            <el-table-column
            property="name"
            label="订单商品"
            width="130">
            </el-table-column>
            <el-table-column
            property="purchaseQuantity"
            label="采购数量">
            </el-table-column>
            <el-table-column
            property="buyer"
            label="买家"
            width="180">
            </el-table-column>
            <el-table-column
            property="address"
            label="买家地址">
            </el-table-column>
            <el-table-column
            property="orderNumber"
            label="订单编号">
            </el-table-column>
            <el-table-column
            property="contactInformation"  
            label="联系方式">
            </el-table-column>
            <el-table-column
            property="totalamount"
            label="总金额">
            </el-table-column>
            <el-table-column
            label="操作"
            width="130"
            align="center">
            <template slot-scope="scope">
                <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
                @click="rowEdit(scope.$index, scope.row)"></el-button>
                <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
                @click="rowDel(scope.$index, scope.row, $event);"></el-button>
            </template>
            </el-table-column>
        </el-table>
        <!--编辑-弹出层-->
        <el-dialog
            title="编辑"
            :visible.sync="isShowEditDialog"
            width="500px"
            @close="dialogClose">
            <el-form
            ref="editForm"
            :model="formFileds"
            label-width="100px"
    
            :rules="rules">
            <el-form-item label="下单时间">
                <el-date-picker v-model="formFileds.date" value-format="yyyy-MM-dd" :editable="false" :clearable="false"></el-date-picker>
            </el-form-item>
            <el-form-item label="订单商品" prop="name">
                <el-input v-model="formFileds.name"></el-input>
            </el-form-item>
            <el-form-item label="采购数量" prop="purchaseQuantity">
                <el-input v-model="formFileds.purchaseQuantity"></el-input>
            </el-form-item>
            <el-form-item label="买家" prop="buyer">
                <el-input v-model="formFileds.buyer"></el-input>
            </el-form-item>
            <el-form-item label="买家地址" prop="address">
                <el-input v-model="formFileds.address"></el-input>
            </el-form-item>
            <el-form-item label="订单编号" prop="orderNumber">
                <el-input v-model="formFileds.orderNumber"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="contactInformation">
                <el-input v-model="formFileds.contactInformation"></el-input>
            </el-form-item>
            <el-form-item label="总金额" prop="totalamount">
                <el-input v-model="formFileds.totalamount"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleEdit(formFileds.id)" class="pull-right margin-l-25">确定</el-button>
                <el-button @click="isShowEditDialog = false;" class="pull-right">取消</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog
            title="新增订单"
            :visible.sync="isShowAddDialog"
            width="500px"
            @close="dialogClose">
            <el-form
                ref="addForm"
                :model="addFormFields"
                label-width="100px"
                :rules="rules">
                <el-form-item label="下单时间">
                <el-date-picker v-model="addFormFields.date" value-format="yyyy-MM-dd" :editable="false" :clearable="false"></el-date-picker>
            </el-form-item>
            <el-form-item label="订单商品" prop="name">
                <el-input v-model="addFormFields.name"></el-input>
            </el-form-item>
            <el-form-item label="采购数量" prop="purchaseQuantity">
                <el-input v-model="addFormFields.purchaseQuantity"></el-input>
            </el-form-item>
            <el-form-item label="买家" prop="buyer">
                <el-input v-model="addFormFields.buyer"></el-input>
            </el-form-item>
            <el-form-item label="买家地址" prop="address">
                <el-input v-model="addFormFields.address"></el-input>
            </el-form-item>
            <el-form-item label="订单编号" prop="orderNumber">
                <el-input v-model="addFormFields.orderNumber"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="contactInformation">
                <el-input v-model="addFormFields.contactInformation"></el-input>
            </el-form-item>
            <el-form-item label="总金额" prop="totalamount">
                <el-input v-model="addFormFields.totalamount"></el-input>
            </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="handleAdd">确定</el-button>
                <el-button @click="dialogClose">取消</el-button>
                </el-form-item>
            </el-form>
            </el-dialog>
        </div>
    </template>
    
    <script>
        export default {
        name: "dTable",
        data() {
            return {
            pageSize: 10,
            currentPage: 1,
            searchQuery: '',
            formFileds: {
                date: '',
                name: '',
                purchaseQuantity:'',
                buyer:'',
                address:'',
                orderNumber:'',
                contactInformation:'',
                totalamount:'',
                id: '',
            },
            addFormFields: {
                date: '',
                name: '',
                purchaseQuantity:'',
                buyer:'',
                address:'',
                orderNumber:'',
                contactInformation:'',
                totalamount:'',
                id: '',
            },
            rules: {
                name: [
                    {required: true, message: '商品名称不能为空', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '买家地址不能为空', trigger: 'blur'}
                ],
                orderNumber:[
                    {required: true, message: '订单编号不能为空', trigger: 'blur'}
                ]
                },
            tableData: [ {
            id: 0,
            date: '2024-05-29',
            name: '洗发水',
            purchaseQuantity: '1500',
            buyer: '张三',
            address: '北京市朝阳区朝阳路 123 号',
            orderNumber: '1234567890123456789',
            contactInformation: '13612345678',  
            totalamount: '45000'
            },
            {
            id: 1,
            date: '2024-05-28',
            name: '护发素',
            purchaseQuantity: '1000',
            buyer: '李四',
            address: '上海市黄浦区南京东路 456 号',
            orderNumber: '9876543210987654321',
            contactInformation: '13987654321',
            totalamount: '30000'
            },
            {
            id: 2,
            date: '2024-05-27',
            name: '沐浴露',
            purchaseQuantity: '800',
            buyer: '王五',
            address: '广州市天河区珠江新城 789 号',
            orderNumber: '5678901234567890123',
            contactInformation: '13567890123',
            totalamount: '24000'
            },
            {
            id: 3,
            date: '2024-05-26',
            name: '洗发露',
            purchaseQuantity: '2000',
            buyer: '赵六',
            address: '深圳市福田区福华路 1010 号',
            orderNumber: '3210987654321098765',
            contactInformation: '13765432109',
            totalamount: '60000'
            },
            {
            id: 4,
            date: '2024-05-25',
            name: '护发素',
            purchaseQuantity: '1200',
            buyer: '刘七',
            address: '成都市锦江区人民南路 999 号',
            orderNumber: '5432109876543210987',
            contactInformation: '13876543210',
            totalamount: '36000'
            },
            {
            id: 5,
            date: '2024-05-24',
            name: '洗发水',
            purchaseQuantity: '1800',
            buyer: '孙八',
            address: '重庆市渝中区解放碑 888 号',
            orderNumber: '8765432109876543210',
            contactInformation: '13786543210',
            totalamount: '54000'
            },
            {
            id: 6,
            date: '2024-05-23',
            name: '洗发露',
            purchaseQuantity: '2200',
            buyer: '周九',
            address: '武汉市江岸区沿江大道 666 号',
            orderNumber: '0123456789012345678',
            contactInformation: '13654321098',
            totalamount: '66000'
            },
            {
            id: 7,
            date: '2024-05-22',
            name: '护发素',
            purchaseQuantity: '1300',
            buyer: '钱十',
            address: '南京市玄武区中山陵 777 号',
            orderNumber: '8901234567890123456',
            contactInformation: '13901234567',
            totalamount: '39000'
            },
            {
            id: 8,
            date: '2024-05-21',
            name: '沐浴露',
            purchaseQuantity: '900',
            buyer: '吴十一',
            address: '杭州市西湖区西湖景区 555 号',
            orderNumber: '3456789012345678901',
            contactInformation: '13890123456',
            totalamount: '27000'
            },
            {
            id: 9,
            date: '2024-05-20',
            name: '洗发水',
            purchaseQuantity: '1600',
            buyer: '郑十二',
            address: '苏州市姑苏区狮子林 333 号',
            orderNumber: '6789012345678901234',
            contactInformation: '13789012345',
            totalamount: '48000'
            },
            {
            id: 10,
            date: '2024-05-19',
            name: '洗发露',
            purchaseQuantity: '2100',
            buyer: '马十三',
            address: '天津市和平区解放北路 222 号',
            orderNumber: '9012345678901234567',
            contactInformation: '13689012345',
            totalamount: '63000'
            },
            {
            id: 11,
            date: '2024-05-18',
            name: '护发素',
            purchaseQuantity: '1100',
            buyer: '陈十四',
            address: '长沙市岳麓区岳麓山 111 号',
            orderNumber: '2345678901234567890',
            contactInformation: '13901234568',
            totalamount: '33000'
            },
            {
            id: 12,
            date: '2024-05-17',
            name: '沐浴露',
            purchaseQuantity: '950',
            buyer: '张十五',
            address: '西安市雁塔区大雁塔 444 号',
            orderNumber: '5678901234567890123',
            contactInformation: '13789012346',
            totalamount: '28500'
            },
            {
            id: 13,
            date: '2024-05-16',
            name: '洗发水',
            purchaseQuantity: '1700',
            buyer: '李十六',
            address: '哈尔滨市道里区中央大街 777 号',
            orderNumber: '8901234567890123456',
            contactInformation: '13890123457',
            totalamount: '51000'
            },
            {
            id: 14,
            date: '2024-05-15',
            name: '洗发露',
            purchaseQuantity: '2300',
            buyer: '王十七',
            address: '青岛市市南区中山路 666 号',
            orderNumber: '3456789012345678901',
            contactInformation: '13901234567',
            totalamount: '69000'
            },
            {
            id: 15,
            date: '2024-05-14',
            name: '护发素',
            purchaseQuantity: '1250',
            buyer: '赵十八',
            address: '南昌市东湖区滕王阁 888 号',
            orderNumber: '6789012345678901234',
            contactInformation: '13789012345',
            totalamount: '37500'
            },
            {
            id: 16,
            date: '2024-05-13',
            name: '沐浴露',
            purchaseQuantity: '880',
            buyer: '孙十九',
            address: '无锡市梁溪区太湖大道 999 号',
            orderNumber: '9012345678901234567',
            contactInformation: '13689012345',
            totalamount: '26400'
            },
            {
            id: 17,
            date: '2024-05-12',
            name: '洗发水',
            purchaseQuantity: '1850',
            buyer: '周二十',
            address: '厦门市思明区鼓浪屿 222 号',
            orderNumber: '2345678901234567890',
            contactInformation: '13901234568',
            totalamount: '55500'
            },
            {
            id: 18,
            date: '2024-05-11',
            name: '洗发露',
            purchaseQuantity: '2150',
            buyer: '钱二十一',
            address: '苏州市吴中区木渎古镇 111 号',
            orderNumber: '5678901234567890123',
            contactInformation: '13789012346',
            totalamount: '64500'
            },
            {
            id: 19,
            date: '2024-05-10',
            name: '护发素',
            purchaseQuantity: '1350',
            buyer: '吴二十二',
            address: '杭州市余杭区西溪湿地 444 号',
            orderNumber: '8901234567890123456',
            contactInformation: '13890123457',
            totalamount: '40500'
            }],
            isShowEditDialog: false,
            isShowAddDialog: false,
            idCounter: 20,
            }
        },
            computed: {
            filteredTableData() {
                return this.tableData.filter(item => {
                return item.orderNumber.includes(this.searchQuery);
            });
            },
            paginatedTableData() {
            const startIndex = (this.currentPage - 1) * this.pageSize;
            const endIndex = startIndex + this.pageSize;
            return this.filteredTableData.slice(startIndex, endIndex);
                
            }
            },
        methods: {
            handleRowClick(row, event, column) {
    
            // 仅选中当前行
            this.setCurRowChecked(row);
            },
            handleCheckedAllAndCheckedNone(selection) {
    
            // 当前选中仅一行时操作-（当前表格行高亮）
            1 != selection.length && this.$refs.list.setCurrentRow();
            },
            dialogClose() {
    
            // 清空编辑表单
            this.$refs.editForm.resetFields();
            },
            rowEdit(index, row) {
    
            this.setCurRowChecked(row);
    
            // 给编辑弹出层赋值
            // ***这里需要注意的是：因为加了排序 所以tableData的顺序和实际显示的行顺序不一样
            for (let key in this.formFileds) {
    
                this.formFileds[key] = row[key];
            }
            this.formFileds.id = row.id;
            this.isShowEditDialog = true;
            },
            handleEdit(id) {
    
            this.$refs.editForm.validate(isValid => {
    
                if (!isValid) return;
                const index = this.tableData.findIndex(item => item.id === id); 
                // 保存编辑后的数据
                if(index !== -1){
                Object.assign(this.tableData[index], this.formFileds);
                this.isShowEditDialog = false;
                
                // 考虑到可能编辑了日期-需要重新排序
                // ***注意：手动排序传参和表格的default-sort属性格式不太一样
                this.$refs.list.sort('date', 'descending');
    
                this.$message.success('编辑成功');}
                else{
                    this.$message.success('编辑失败');
                }
            });
            },
            rowDel(index, row, event) {
    
            // 让当前删除按钮失焦
            event.target.blur();
    
            this.$confirm('确定要删除当前订单吗？', '删除', {
                comfirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                const index = this.tableData.findIndex(item => item.id === row.id); 
                this.tableData.splice(index, 1);
                this.$message.success('删除成功');
                return false;
            });
            },
            // 选中当前行-当前行的复选框被勾选
            setCurRowChecked(row) {
    
            this.$refs.list.clearSelection();
            this.$refs.list.toggleRowSelection(row);
            },
            showAddDialog() {
        this.isShowAddDialog = true;
            },
            handleAdd() {
                this.$refs.addForm.validate(valid => {
                if (!valid) return;
                const newId = this.idCounter++;;
                // 添加新订单到数据源
                this.tableData.push({
                    id: newId,
                    date: this.addFormFields.date,
                    name: this.addFormFields.name,
                    address: this.addFormFields.address,
                    purchaseQuantity:this.addFormFields.purchaseQuantity,
                    buyer:this.addFormFields.buyer,
                    orderNumber:this.addFormFields.orderNumber,
                    contactInformation:this.addFormFields.contactInformation,
                    totalamount:this.addFormFields.totalamount,
                });
                this.dialogClose(); // 关闭弹出层
                this.$message.success('新增订单成功');
                });
            },
            dialogClose() {
                this.$refs.addForm.resetFields(); // 清空表单
                this.isShowAddDialog = false; // 关闭弹出层
            },
            handleCurrentChange(val) {
        this.currentPage = val;
    },
    handleSizeChange(val){
        this.pageSize=val
        this.currentPage = 1; // 切换每页条数时重置到第一页
    }
        }
        }
    </script>
    
    <style scoped lang="less">
    .el-form {
        padding: 0 10px;
    }
    .el-date-editor {
        width: 100% !important;
    }
    </style>